<template>
<div class="split_box">
  <el-card style="height: 100%;" class="card_box">
    <splitpanes class="default-theme" horizontal  style="height: 100%">
      <pane min-size="0" :size="sizes||20">
        <slot name="top"/>
      </pane>
      <pane class="pans" :size="(100-sizes) || 80">
        <slot name="centerToolbar"/>
      </pane>
      <pane v-if="num > 2" max-size="100">
        <slot name="center"/>
      </pane>
    </splitpanes>
  </el-card>
</div>
</template>

<script setup name="SplitTwo">
  const props = defineProps({
    // 数据
    num: {
      type: Number,
      default: null,
    },
    sizes: {
      type: Number,
      default: null,
    },
    
  })
// getList();
</script>
<style scoped>
  .app-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
  .split_box {
    width: 100%;
    height: 90vh;
    padding: 20px;
    box-sizing: border-box;
  }
  .split_box :deep(.el-card__body) {
    height: 100%;
    padding: 0 !important;
  }
  .split_box :deep(.splitpanes.default-theme .splitpanes__pane)  {
    background: #fff;
  }
  .card_box {
    padding: 20px;
    box-sizing: border-box;
  }
  .default-theme, :deep(.splitpanes__pane) {
    scroll-behavior: auto
  }
</style>